<template>
  <div class="exercise">
    <!-- 单项选择 -->
    <div v-if="question.question_type == '0'" style="padding: 10px;">
        <div class="head flex item-center" style="margin: 10px 0;">
            <div class="q_type">单选题</div>
            <div class="number bold black" style="margin-right: 5px;">{{ current }}/{{ total }}、</div>
            <div v-html="question.title"></div>
            <div>（得分：{{ question.score }}分）</div>
        </div>
        <ul>
            <li class="flex item-center" 
                v-for="item of question.optionsList" :key="item.id"
                style="padding: 10px;"
                >
                <div>{{ item.code }}、</div>
                <div
                    :class="[
                        item.code == question.question_answer && 'answer',
                        item.code == question.answer && item.code != question.question_answer && 'error'
                    ]" 
                    v-html="item.answer">
                </div>
            </li>
        </ul>
        <div style="padding: 10px; background: #f0f8ff;">
            <div class="flex item-center">
                <div>答案：</div>
                <div>{{ question.question_answer }}</div>
            </div>
            <div class="flex item-center" style="margin: 10px 0;">
                <div>你选择：</div>
                <div>{{ question.answer }}</div>
            </div>
            <div class="flex item-center">
                <div>解析：</div>
                <div v-html="question.know_point"></div>
            </div>
        </div>
    </div>

    <!-- 判断题 -->
    <div v-if="question.question_type == '1'" style="padding: 10px;">
        <div class="head flex item-center" style="margin: 10px 0;">
            <div class="q_type">判断题</div>
            <div class="number bold black" style="margin-right: 5px;">{{ current }}/{{ total }}、</div>
            <div v-html="question.title"></div>
            <div>（得分：{{ question.score }}分）</div>
        </div>
        <ul>
            <li class="flex item-center"  style="padding: 10px;">
                <div>A、</div>
                <div :class="[
                    'Y' == question.question_answer && 'answer',
                    'Y' != question.question_answer && 'Y' == question.answer && 'error'
                ]">正确</div>
            </li>
            <li class="flex item-center"  style="padding: 10px;">
                <div>B、</div>
                <div :class="[
                    'Y' != question.question_answer && 'answer',
                    'Y' == question.question_answer && 'Y' != question.answer && 'error'
                ]">错误</div>
            </li>
        </ul>
        <div style="padding: 10px; background: #f0f8ff;">
            <div class="flex item-center">
                <div>答案：</div>
                <div>{{ question.question_answer == 'Y' ? '正确' : '错误' }}</div>
            </div>
            <div class="flex item-center" style="margin: 10px 0;">
                <div>你选择：</div>
                <div>{{ question.answer == 'Y' ? '正确' : '错误' }}</div>
            </div>
            <div class="flex item-center">
                <div>解析：</div>
                <div v-html="question.know_point"></div>
            </div>
        </div>
    </div>

    <!-- 多项选择 -->
    <div v-if="question.question_type == '2'" style="padding: 10px;">
        
        <div class="head flex item-center" style="margin: 10px 0;">
            <div class="q_type">多选题</div>
            <div class="number bold black" style="margin-right: 5px;">{{ current }}/{{ total }}、</div>
            <div v-html="question.title"></div>
            <div>（得分：{{ question.score }}分）</div>
        </div>
        <ul>
            <li class="flex item-center" 
                v-for="item of question.optionsList" :key="item.id"
                style="padding: 10px;"
                >
                <div>{{ item.code }}、</div>
                <div :class="[
                    question.question_answer && question.question_answer.indexOf(item.code) != -1 && 'answer',
                    question.question_answer && question.question_answer.indexOf(item.code) == -1 && question.answer.indexOf(item.code) != -1 && 'error'
                ]" v-html="item.answer"></div>
            </li>
        </ul>
        <div style="padding: 10px; background: #f0f8ff;">
            <div class="flex item-center">
                <div>答案：</div>
                <div>{{ question.question_answer }}</div>
            </div>
            <div class="flex item-center" style="margin: 10px 0;">
                <div>你选择：</div>
                <div>{{ question.answer }}</div>
            </div>
            <div class="flex item-center">
                <div>解析：</div>
                <div v-html="question.know_point"></div>
            </div>
        </div>
    </div>

    <!-- 问答题 -->
    <div v-if="question.question_type == '3'" style="padding: 10px;">
        <div class="head flex item-center" style="margin: 10px 0;">
            <div class="q_type">问答题</div>
            <div class="number bold black" style="margin-right: 5px;">{{ current }}/{{ total }}、</div>
            <div v-html="question.title"></div>
            <div>（得分：{{ question.score }}分）</div>
        </div>
        <ul>
            <li class="flex item-center" style="padding: 10px;">
                <div>您的答案：</div>
                <div v-html="question.answer"></div>
            </li>
            <li class="flex item-center" style="padding: 10px;">
                <div>正确答案：</div>
                <div v-html="question.question_answer"></div>
            </li>
        </ul>
        <div style="padding: 10px; background: #f0f8ff;">
            <div class="flex item-center">
                <div>解析：</div>
                <div v-html="question.know_point"></div>
            </div>
        </div>
    </div>

  </div>
</template>

<script>
export default {
    props: {
        question: {
            type: Object,
            require: true,
            default: () => {
                return {}
            }
        },
        total:{
            type: Number,
            default: 0
        },
        current:{
            type: Number,
            default: 0
        }
    }
}
</script>

<style lang="scss" scoped>
.q_type {
    padding: 3px 5px;
    border-radius: 5px;
    background-color: #2db7f5;
    color: #fff;
    font-weight: 600;
    margin-right: 10px;
}
.answer {
    color: blue;
}
.error {
    color: red;
}

</style>